<template>
	<view>
		<view class="conb">
			<!-- 轮播图 -->
			<swiper :class="(state == 5||state==3)? 'home-swiper1' : 'home-swiper'" @change="swipers"
				:style="'height:' + (state==5 ? '360rpx' : swiperH) + ';border-radius: ' + (state == 4 ? '0px' : '10px') + ';'"
				:circular="true" :indicator-dots="indicatordots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<block v-for="(item, index) in banner" :key="index">
					<swiper-item>
						<image v-if="(state == 5||state==3)" mode="aspectFill"  @tap="jump(item.shop_id,index)"
							:src="item.pic ? imgoss + item : item ? imgoss + item : item"
							:style="'height:' + (state==5 ? '360rpx' : swiperH)" @load="getHeight"
							class="slide-image" />
						<image @tap="previewImg(index)" v-else :src="item.pic ? imgoss + item.pic : item ? imgoss + item : item"
							:style="'height:' + (state==5 ? '360rpx' : swiperH)" @load="getHeight"
							class="slide-image" />
					</swiper-item>
				</block>
			</swiper>
			
			<!-- 指示点 -->
			<view class="idos2" v-if="state == 1">
				<view :class="current == index ? 'actives1' : ''" v-for="(item, index) in banner" :key="index"></view>
			</view>
			<view class="idos3" v-if="state == 4">
				<view>
					<view :class="current == index ? 'actives1' : ''" v-for="(item, index) in banner" :key="index"></view>
				</view>
			</view>
			<view class="idos1" v-if="state == 2||state == 5">
				<view :class="current == index ? 'actives' : ''" v-for="(item, index) in banner" :key="index"></view>
			</view>
			<!--     
				<view class="idos1" wx:else>
					<view wx:for="{{banner}}" class="{{current==index?'actives':''}}" wx:key="index"></view>
				</view> -->
			<view class="idos" v-if="state==3">
				<view>{{ current + 1 }}/{{ banner.length }}</view>
			</view>
		</view>
		<!-- 公告 -->
	<!-- 	<view class="news" v-if="state==5">
			<image src="/static/tzicon.png" mode="widthFix" class="newicon"></image>
			<swiper class="home-swipers" :circular="true" :autoplay="autoplay1" :vertical="vertical1"
				:interval="interval1" :duration="duration1" :indicator-dots="indicatordots1">
				<block v-for="(item,index) in news" :key="index">
					<swiper-item bindtap="affiche">
						<view class="newtxt">{{item.title}}</view>
					</swiper-item>
				</block>
			</swiper>
			<image src="/images/list.png" bindtap="news" mode="widthFix" class="mores"></image>
		</view> -->
	</view>
</template>

<script>
	var util = require('../../utils/util.js');
	const api = require('../../utils/api.js');
	const app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight,
				statusBarHeight1: getApp().globalData.statusBarHeight1,
				host: app.globalData.img_src,
				img_url: app.globalData.img_urls,
				imgoss: app.globalData.imgoss,
				indicatordots: false,
				//轮播图配置
				autoplay: true,

				interval: 3000,
				duration: 1200,
				current: 0,
				autoplay1: true,
				interval1: 2000,
				duration1: 1200,
				indicatordots1: false,
				vertical1: true,
				// news: ['每日瑜伽女神节 寻找最美伽人~', '每日瑜伽女神节 寻找最美伽人~'],
				navBarHeight: '',
				menuRight: '',
				menuBotton: '',
				menuHeight: '',
				swiperH: '',
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			banner: {
				type: Array,
				default: []
			},
			state: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			},
			// news: {
			// 	type: Array,
			// 	default: []
			// },
			height: {
				type: Number,
				default: 0
			},
		},
		created() {},
		/**
		 * 组件的方法列表
		 */
		methods: {
			previewImg(idx){
				this.$emit('previewImg', {
				    detail: idx
				});
			},
			attached: function() {
				const that = this;
				////console.log(this.banner)
				// 获取系统信息
				// #ifdef APP || MP-WEIXIN
				const systemInfo = uni.getSystemInfoSync();
				// 胶囊按钮位置信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
				this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height +
					systemInfo.statusBarHeight,
					this.menuRight = systemInfo.screenWidth - menuButtonInfo.right,
					this.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight,
					this.menuHeight = menuButtonInfo.height
				// #endif

			},

			affiche() {
				uni.navigateTo({
					url: '/subcontract/news/news'
				});
			},

			jump(type,idx) {
				if (type>0) {
					uni.navigateTo({
						url: '/subcontract/Shopdetails/index?id='+this.banner[idx].shop_id
					});
				}else{
					uni.navigateTo({
						url: '/subcontract/swiperdetail/swiperdetail?id='+this.banner[idx].id
					});
				}
			},

			swipers(e) {
				this.current = e.detail.current
			},

			getHeight: function(e) {
				var winWid = uni.getSystemInfoSync().windowWidth - 10; //获取当前屏幕的宽度
				var imgh = e.detail.height; //图片高度
				var imgw = e.detail.width;
				var sH = (winWid * imgh) / imgw + 10 + 'px';
				//////console.log(sH)
				this.swiperH = sH //设置高度
			}
		},
		mounted() {
			// 处理小程序 attached 生命周期
			this.attached();
		}
	};
</script>
<style>
	.conb{
		width: 100%;
		height: auto;
		display: table;
		position: relative;
	}
	.home-swiper1 {
		width: 686rpx;
		height: auto;
		display: table;
		border-radius: 10rpx !important;
		overflow: hidden;
		margin-left: 32rpx;
	}

	.home-swiper {
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.slide-image {
		width: 100%;
		height: auto;
		display: table;
	}

	.idos {
		width: auto;
		display: table;
		margin: auto;
		height: 15px;
		border-radius: 50px;
		background-color: rgba(0, 0, 0, 0.4);
		float: right;
		margin-top: -30px;
		position: relative;
		margin-right: 10px;
		padding: 0px 10px;
		/* margin-top: -20px;
  margin-bottom: 5px;
  position: relative;
  box-sizing: border-box;
  padding: 0px 7px; */
	}

	/* .idos>view{
  width: 8px;
  height: 8px;
  display: table;
  float: left;
  margin-right: 7px;
  background-color: rgba(255,255,255,0.5);
  margin-top: 3px;
}
.atives1{
  background-color: #fff !important;
  width: 25px !important;
}
.idos>view:last-child{
  margin-right: 0px;
} */
	.news {
		width: 702rpx;
		height: 40px;
		display: table;
		height: 76rpx;background: #CFFFE7;
		border-radius: 10rpx 10rpx 20rpx 10rpx;
		margin: 30rpx 24rpx;
		position: relative;
		box-sizing: border-box;
		padding-left: 45px;
		padding-right: 30px;
		margin-bottom: 0px;
	}

	.newicon {
		width: 19px;
		position: absolute;
		top: 50%;
		margin-top: -8px;
		left: 9px;
	}

	.home-swipers {
		width: 100%;
		height: 76rpx;
		display: table;
	}

	.newtxt {
		width: 100%;
		height: 76rpx;
		display: table;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #24C373;
		line-height: 76rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.mores {
		width: 20px;
		height: 20px;
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -10px;
	}

	.idos>view {
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #ffffff;
		line-height: 22px;
	}

	.idos1 {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px auto;
		position: absolute;
		bottom: 4px;
		z-index: 1;
	}

	.idos1>view {
		background: rgba(255, 255, 255, 0.5);
		width: 6px;
		height: 6px;
		display: table;
		margin-right: 6px;
		border-radius: 6px;
	}

	.actives {
		width: 6px !important;
		height: 6px !important;
		background-color: #fff !important;
	}

	.idos2 {
		width: auto;
		height: 4rpx;
		background: rgba(0, 0, 0, 0.5);
		display: inline-flex;
		margin-left: 20rpx;
		justify-content: center;
		align-items: center;
		margin: 10px 20rpx;
		position: relative;
		top: -48px;
		z-index: 1;
	}

	.idos2>view {
		width: 80rpx;
		height: 4rpx;
	}

	.actives1 {
		background-color: #fff !important;
	}


	.idos3 {
		width: 100%;
		height: 4rpx;
		display: inline-flex;
		margin-left: 20rpx;
		justify-content: center;
		align-items: center;
		margin: 10px 0rpx;
		position: absolute;
		bottom: 4px;
		z-index: 1;
	}

	.idos3>view {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: auto;
		height: 4rpx;
		background: rgba(255, 255, 255, 0.5);
	}

	.idos3>view>view {
		width: 80rpx;
		height: 4rpx;
	}

	.actives1 {
		background-color: #fff !important;
	}
</style>